<div class="book-card"
     [class.selected]="isSelected"
     (mouseover)="isHovered = true"
     (mouseout)="isHovered = false">

  <div class="cover-container" [ngClass]="{ 'shimmer': !isImageLoaded, 'center-info-btn': readButtonHidden }">
    <div
      class="cover-container"
      [ngClass]="{
        'center-info-btn': readButtonHidden,
        'loaded': isImageLoaded
      }">
      <img
        [src]="urlHelper.getThumbnailUrl(book.id, book.metadata?.coverUpdatedOn)"
        class="book-cover"
        [class.loaded]="isImageLoaded"
        alt="Cover of {{ book.metadata?.title }}"
        loading="lazy"
        (load)="onImageLoad()"/>
    </div>

    @if (book.metadata?.seriesNumber != null) {
      <div class="series-number-overlay">
        #{{ book.metadata?.seriesNumber }}
      </div>
    }

    @if (book.seriesCount != null && book.seriesCount! > 1) {
      <div class="series-count-overlay">
        {{ book.seriesCount }}
      </div>
    }

    <p-button [rounded]="true" icon="pi pi-info" class="info-btn" (click)="openBookInfo(book)"></p-button>

    <p-button [hidden]="readButtonHidden" [rounded]="true" icon="pi pi-book" class="read-btn" (click)="readBook(book)"></p-button>

    @if (isCheckboxEnabled) {
      <p-checkbox
        [binary]="true"
        class="select-checkbox"
        (click)="captureMouseEvent($event)"
        [ngModel]="isSelected"
        (onChange)="toggleSelection($event)">
      </p-checkbox>
    }

    @if (progressPercentage !== null) {
      <p-progressBar
        [value]="progressPercentage"
        [showValue]="false"
        class="cover-progress-bar"
        [ngClass]="{ 'progress-complete': progressPercentage === 100, 'progress-incomplete': progressPercentage < 100 }">
      </p-progressBar>
    }
    @if (koProgressPercentage !== null) {
      <p-progressBar
        [value]="koProgressPercentage"
        [showValue]="false"
        [ngClass]="[
          progressPercentage == null ? 'cover-progress-bar-ko-only' : 'cover-progress-bar-ko-both',
          koProgressPercentage === 100 ? 'progress-complete-ko' : 'progress-incomplete-ko'
        ]">
      </p-progressBar>
    }
  </div>

  <div [hidden]="bottomBarHidden">
    <div class="book-title-container flex items-center">
      <h4 class="book-title m-0 pl-2"
          tooltipPosition="bottom"
          tooltipStyleClass="text-xs text-center"
          [pTooltip]="book.metadata?.title">
        {{ book.metadata?.title }}
      </h4>
      <p-tieredmenu #menu [model]="items" [popup]="true" appendTo="body"></p-tieredmenu>
      <p-button
        class="custom-button-padding"
        size="small"
        [text]="true"
        (click)="onMenuToggle($event, menu)"
        icon="pi pi-ellipsis-v">
      </p-button>
    </div>
  </div>
</div>
